var Material;

$(document).ready(function () {
    Material = new Vue({
        el: '#material',
        data: {
            materialType: [{
                    name: '图文消息',
                    clickStatus: 'this-current',
                },
                {
                    name: '图片',
                    clickStatus: '',
                },
                {
                    name: '视频',
                    clickStatus: '',
                },
                {
                    name: '语音',
                    clickStatus: '',
                },
                {
                    name: '模板消息',
                    clickStatus: '',
                },
                {
                    name: '文件',
                    clickStatus: '',
                },
                {
                    name: '卡片',
                    clickStatus: '',
                },
            ],
            materialList: '',
            showGroupItem: '',
            groupList: [{
                    id: 001,
                    name: '全部'
                },
                {
                    id: 002,
                    name: '未分组'
                }
            ]
        },
        methods: {
            choiceType: function (index) {
                this.materialType.forEach(function (item) {
                    item.clickStatus = '';
                });
                this.materialType[index].clickStatus = 'this-current';
                console.log(index);
            },
            // 获取图文素材数据
            getImagesTextList: function () {
                axios.get('/admin/Source_material/getMaterial/type/news')
                    .then(this.getImagesTextListSucc);
            },
            // 获取图文素材数据成功后执行的数据处理
            getImagesTextListSucc: function (res) {
                console.log(res);
                this.materialList = res.data.item;
                console.log(this.materialList);
                // 瀑布流展示
                var container = $('#masonry');
                container.imagesLoaded(function () {
                    container.masonry({
                        itemSelector: '.material-item',
                        gutter: 10,
                        isAnimated: true,
                    });
                });
            },
            // 删除
            deleteImagesTextItem: function (media_id) {
                layer.confirm('确认删除吗？', {
                    btn: ['是', '否'] //可以无限个按钮
                }, function (index, layero) {
                    axios.get('/admin/Source_material/deleteMaterial?media_id=' + media_id)
                    .then(function(){
                        Material.getImagesTextList();
                        layer.closeAll();
                    });
                }, function (index) {
                    //按钮【按钮二】的回调
                });
            },
            // 点击改变分组
            changeGroup: function (media_id) {
                this.showGroupItem = media_id;
            },
            // 取消分组
            cancleGroup: function () {
                this.showGroupItem = '';
            }
        },
        mounted() {
            // 获取图文素材数据
            this.getImagesTextList();
        },
    });
});